<template>
  <div class="container">
    <van-nav-bar
        :title="currentTab=== 'login' ? '登陆' : '注册'"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="logo">
      <img src="@/assets/image/logo.png" alt="logo"/>
      <span>陈陈每日新闻</span>
    </div>
    <div class="login">
      <!-- 顶部切换 -->
      <div class="top">
        <div class="tab"
             :class="{ active: currentTab === 'login' }"
             @click="setCurrentTab('login')"> 登陆
        </div>
        <div class="tab" :class="{ active: currentTab === 'register' }"
             @click="setCurrentTab('register')">注册
        </div>
      </div>
      <!-- 登陆表单 -->
      <van-form v-if="currentTab === 'login'" @submit="handleLogin">
        <van-cell-group inset>
          <van-field
              v-model="loginFormData.username"
              name="用户名"
              label="用户名"
              required
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
              v-model="loginFormData.password"
              type="password"
              name="密码"
              label="密码"
              required
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
      <!-- 注册表单 -->
      <van-form
          v-if="currentTab === 'register'"
          class="form"
          @submit="handleRegister"
      >
        <van-cell-group inset>
          <van-field
              v-model="registerFormData.username"
              name="用户名"
              label="用户名"
              required
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
              v-model="registerFormData.password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              required
              :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
              v-model="registerFormData.confirmPassword"
              type="password"
              label="确认密码"
              placeholder="请再次输入密码"
              :rules="[{ required: true, message: '请再次输入密码' }]"
              required
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {showFailToast, showSuccessToast} from "vant";
import {login, register} from "@/api/login.js";
import {useRoute, useRouter} from 'vue-router';
import {clearUserLoginStatus, saveUserLoginStatus} from "@/utils/userIsLogin";
const route = useRoute();
const activeTab = route.query.activeTab || 'login';// 当前选中的选项卡
const router = useRouter();
// 当前选中的选项卡
const currentTab = ref('login');
onMounted(()=>{
  currentTab.value = activeTab
})
// 登陆表单数据
const loginFormData = ref({
  username: '',
  password: '',
});
// 注册表单数据
const registerFormData = ref({
  username: '',
  password: '',
  confirmPassword: '',
});
// 设置当前选中的选项卡
const setCurrentTab = (tab) => {
  currentTab.value = tab;
};
// 返回上一页
const onClickLeft = () => {
  router.go(-1);
  window.history.back();
};
// 处理登陆表单提交事件
const handleLogin = () => {
  console.log(loginFormData.value)
  const submitObj = {
    username: loginFormData.value.username,
    password: loginFormData.value.password,
  };
  login(submitObj).then(({data}) => {
    console.log(data.token)
    saveUserLoginStatus(data.token)
    const successMessage = data.message || '登陆成功';
    showSuccessToast(successMessage)
    // router.go(-1);
    window.history.back();
  }).catch(err => {
    showFailToast(`登陆失败：${err.message}`)
    clearUserLoginStatus()
  });
};
// 处理注册表单提交事件
const handleRegister = () => {
  if (registerFormData.value.password !== registerFormData.value.confirmPassword) {
    showFailToast('两次输入的密码不一致');
    return;
  }
  const submitObj = {
    username: registerFormData.value.username,
    password: registerFormData.value.password,
  };
  register(submitObj).then(res => {
    console.log(res.data)
    showSuccessToast('注册成功')
    currentTab.value = 'login';// 注册成功后自动切换到登陆选项卡
  }).catch(err => {
    showFailToast(`注册失败：${err.message}`)
  });
};

</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #f7f8fa;

  .logo {
    margin-top: 50px;
    margin-bottom: 30px;
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 300px;
      height: 150px;
      margin: 0 auto;
    }

    span {
      font-size: 72px;
      color: #8859c3;
      margin-top: 20px;
      font-weight: 600;
    }
  }
}

.login {
  padding: 20px;
  max-width: 750px;
  margin: 0 auto;
}

.top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.tab.active {
  color: #fff;
  background-color: #007aff;
}

.form {
  margin-bottom: 20px;
}

.submit-button {
  margin-top: 20px;
}
</style>
